<template>
    <div class="topic" :class="loadingPage && 'g-loadingPage'">
        <c-header title="主题">
            <span v-if="'content' in topicInfo" slot="right">
                <i @click="topic_collect" class="fa" :class="topicInfo.is_collect ? 'fa-star':'fa-star-o'" aria-hidden="true"></i>
            </span>
        </c-header>
        <section v-if="'content' in topicInfo" class="body">
            <TopPrompt :options="topPrompt"></TopPrompt>
            <div class="content_head">
                <div class="title">
                    {{topicInfo.title}}
                </div>
                <div class="author">
                    <div @click="toUserProfile(topicInfo.author.loginname)" class="avatar m-avatar">
                        <img :src="topicInfo.author.avatar_url" alt="">
                    </div>
                    <div class="info">
                        <p class="name">
                            {{topicInfo.author.loginname}}
                           
                        </p>
                        <p>发布时间：{{formatCountDownTime(topicInfo.create_at)}}</p>
                    </div>
                    <div class="view_num ">
                        <button v-text="formatTabBtn(topicInfo.top,topicInfo.good,topicInfo.tab,false)" :class="formatTabBtn(topicInfo.top,topicInfo.good,topicInfo.tab,true)">
                        </button>
                        <br>
                        <span>{{topicInfo.visit_count}}次预览</span>
                    </div>
                </div>
            </div>
            <div class="markdown-body topic-content" v-html="topicInfo.content"></div>
            <div class="reply_wrap">
                <div class="reply_title">
                    <span class="g-color">{{topicInfo.reply_count}}</span> 回复
                </div>
                <div class="reply_list">
                    <ul>
                        <li v-for="item in topicInfo.replies">
                            <div class="info">
                                <div @click="toUserProfile(item.author.loginname)" class="avatar m-avatar">
                                    <img :src="item.author.avatar_url" alt="">
                                </div>
                                <div class="name">
                                    {{item.author.loginname}} {{formatCountDownTime(item.create_at)}}
                                    <span v-if="topicInfo.author.loginname == item.author.loginname">
                                        作者
                                    </span>
                                    <!-- <span v-if="userInfo.loginname == item.author.loginname">
                                        我的评论
                                    </span> -->
                                </div>
                                <div class="btn_wrap">
                                    <i @click="thumb(item)" :class="item.ups.length ? 'g-color fa-thumbs-up' : 'fa-thumbs-o-up'" class="fa" aria-hidden="true"> <span>{{item.ups.length}}</span></i>
                                    <i @click="replyItem(item)" class="fa fa-mail-reply" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="content" v-html="item.content">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <div v-if="'content' in topicInfo" class="submit_wrap">
            <textarea ref="textarea" v-model="replyText" id="content" rows="1" :placeholder="placeText" class="text"></textarea>
            <button @click="reply" :class="replyText ? '' :'disable'" class="btn">发送</button>
        </div>
    </div>
</template>
<script>
import Share from './../share'
import * as API from '../api'
import cHeader from './Header'
import TopPrompt from './TopPrompt'

export default {

    name: 'topic',

    mixins: [Share],
    components: {
        cHeader,
        TopPrompt
    },
    data() {
        return {
            loadingPage: false,
            replyId: '',
            placeText: '请输入内容',
            replyName: '',
            replyText: '',
            topicInfo: {},
            topPrompt:{
                display:false,
                type: 'error',
                text: '',
                timeout: 3000,
            }
        }
    },

    created() {
        var tthis = this;
    },

    activated() {
        this.topicInfo = {};
        this.getTopic();
    },

    computed: {
        userInfo() {
            return this.$store.state.user.userInfo;
        },
        queryId() {
            return this.$route.query.id;
        },
    },

    methods: {

        showTopPrompt(obj){
            this.topPrompt.display = true;
            this.topPrompt.type = obj.type || this.topPrompt.type;
            this.topPrompt.text = obj.text;
        },

        topic_collect(){
            var tthis = this,
                type = tthis.topicInfo.is_collect ? 'de_collect' : 'collect';
            API.topic_collect({
                type: type,
                data:{
                    accesstoken: tthis.userInfo.token,
                    topic_id:tthis.queryId
                },
                success(response) {
                    if (response) {
                        let collectBool = type =='collect' ? true : false;
                        tthis.topicInfo.is_collect = collectBool ;

                        tthis.showTopPrompt({
                            type:'successful',
                            text: collectBool ? '收藏成功！':'取消收藏成功！',
                        })
                    }
                },
                complete() {
                }
            })
        },

        replyItem(item) {
            this.$refs.textarea.focus();
            this.replyText = '';
            this.replyName = item.author.loginname;
            this.placeText = '@' + item.author.loginname;
            this.replyId = item.id;
        },

        getTopic() {
            var tthis = this;
            if (!tthis.loadingPage) {
                tthis.loadingPage = true;
                API.topic({
                    id: this.queryId,
                    data:{
                        accesstoken: tthis.userInfo.token,
                    },
                    success(response) {
                        if (response) {
                            tthis.topicInfo = response.data;
                            // console.log(JSON.stringify(response.data.replies[0]))
                        }
                    },
                    complete() {
                        tthis.loadingPage = false;
                    }
                })
            }
        },

        reply() {
            let tthis = this,
                type = tthis.replyId ? 'user' : 'topic';

            if (!tthis.loadingPage && tthis.replyText) {
                tthis.loadingPage = true;
                API.reply({
                    data: {
                        accesstoken: tthis.userInfo.token,
                        content: type == 'user' ? tthis.placeText + ' ' + tthis.replyText : tthis.replyText,
                        topicId: tthis.queryId,
                        reply_id: type == 'user' ? tthis.replyId : '',
                    },
                    success(response) {
                        if (response.error_msg) {
                             tthis.showTopPrompt({
                                type:'error',
                                text:response.error_msg,
                            });
                        } else {
                            if (type == 'topic') {
                                tthis.topicInfo.replies.push({
                                    id: response.reply_id,
                                    author: {
                                        loginname: tthis.userInfo.loginname,
                                        avatar_url: tthis.userInfo.avatar_url
                                    },
                                    content: tthis.replyText,
                                    ups: [],
                                    create_at: new Date()
                                });
                            } else if (type == 'user') {
                                tthis.topicInfo.replies.push({
                                    id: response.reply_id,
                                    author: {
                                        loginname: tthis.userInfo.loginname,
                                        avatar_url: tthis.userInfo.avatar_url
                                    },
                                    content: '<a href="/userProfile?name=' + tthis.replyName + '">' + tthis.placeText + ' </a>' + tthis.replyText,
                                    ups: [],
                                    create_at: new Date()
                                });
                            }

                            tthis.showTopPrompt({
                                type:'successful',
                                text:'发送成功',
                            });

                            tthis.placeText = '';
                            tthis.replyId = '';
                            tthis.replyText = '';
                        }
                    },
                    complete() {
                        tthis.loadingPage = false;
                    }
                })
            }
        },

        thumb(item) {
            let tthis = this;
            API.thumb({
                data: {
                    id: item.id,
                    accesstoken: tthis.userInfo.token,
                },
                success(response) {
                    if (response.error_msg) {
                        tthis.showTopPrompt({
                            type:'error',
                            text:response.error_msg,
                        });
                    } else {
                        if (response.action == 'up') {
                            item.ups.push(item.id);
                            tthis.showTopPrompt({
                                type:'successful',
                                text:'点赞成功',
                            });

                        } else {
                            item.ups = [];
                            tthis.showTopPrompt({
                                type:'successful',
                                text:'取消点赞',
                            });
                        }
                    }
                },
                complete() {
                    // tthis.loadingPage = false;
                }
            })
        }
    }
}

</script>
<style lang="less" scoped>
.content_head {
    padding-bottom: 16px;
    margin-bottom: 10px;
    padding: 0 20px;
    .title {
        padding: 5px;
        margin: 15px 0;
        font-size: 18px;
        color: #2c3e50;
        line-height: 1.5;
        background-color: #f0f0f0;
        border-radius: 5px;
    }
    .author {
        display: flex;
        padding-bottom: 20px;
        border-bottom: 1px solid #f3f3f3;
        .info {
            flex: 1;
            padding-top: 5px;
            padding-left: 14px;
        }
        .view_num {
            padding-top: 5px;
            font-size: 12px;
        }
        button {
            float: right;
            font-size: 12px;
            width: 90%;
            height: 22px;
            line-height: 22px;
            border: none;
            margin-bottom: 4px;
        }
    }
}

.topic-content {
    padding: 0 20px;
}

.reply_wrap {
    margin-top: 10px;
    .reply_title {
        font-weight: 600;
        padding: 0 20px;
        font-size: 15px;
        line-height: 40px;
        border: 1px solid #e2e2e2;
        border-left: 0;
        border-right: 0;
        span {
            font-size: 18px;
        }
    }
}

.reply_list li {
    padding: 10px;
    border-bottom: 1px solid #f3f3f3;
    .m-avatar{
        border-radius: 10px;
        width: 44px;
        height: 44px;
        font-size: 44px;
    }
    &:last-child {
        border: 0;
    }
    .info {
        display: flex;
        .name {
            padding-top: 2px;
            padding-left: 10px;
            line-height: 36px;
            flex: 1;
            span{
                padding: 1px 4px;
                font-size: 12px;
                line-height: 18px;
                color: #fff;
                background: #6ba44e;
                vertical-align: top;
                display: inline-block;
            }
        }
        .btn_wrap {
            font-size: 19px;
            i {
                margin-left: 6px;
            }
            span {
                font-size: 14px;
                padding-left: 6px;
            }
            .fa-thumbs-up {
                font-size: 20px;
            }
        }
    }
    .content {
        padding-top: 10px;
    }
}


.submit_wrap {
    width: 100%;
    padding: 5px 10px;
    border-top: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 14px;
    height: 50px;
    display: flex;
    textarea {
        flex: 1;
        border: 0px;
        padding: 8px 0;
    }
    button {
        width: 50px;
        height: 32px;
        line-height: 32px;
    }
    .disable {
        opacity: .6;
    }
}

</style>
